<template>
  <div class="doneProjectTable">
    <a-table
      :columns="columns"
      :data-source="listData"
      :defaultExpandAllRows="true"
      :scroll="{ x: 'max-content'}"
      :loading="loading"
    >
      <template v-for="item in columnsData" :slot="item.dataIndex" slot-scope="text">
        <span class="txt" :key="item.id" :style="{width: item.width+'px'}">
          <a-tooltip placement="topLeft" :title="text">
            <a v-if="item.dataIndex=='projectShortName'">{{text}}</a>
            <span v-else>{{text}}</span>
          </a-tooltip>
        </span>
      </template>
    </a-table>
  </div>
</template>
<script>
  export default {
    i18n: require('./i18n'),
    data() {
      return {
        listData: [],
        selectedRowKeys: [],  // 选择数据
        expandedRowKeys: [], // 树状展示数据
        dataName: '', //说明弹框需要的名字
        updatedTable: [],
        /**技术指标的数据 */
        tecNewArr: {},
        adjustmentDescription: '', //调整指标说明
        loading:false,
        tableData:[],
      }
    },
    computed: {
      //表数据
      columns(){
        return [{
            title: this.$t('deptMonthProjectSynthesis.index'),
            dataIndex: 'index',
            key: 'index',
            width: 70,
            align:'left',
            customRender: (text,record,index) => `${index+1}`,
            fixed:'left',
          },
          {
            title: this.$t('deptMonthProjectSynthesis.projectShortName'),
            dataIndex: 'projectShortName',
            key: 'projectShortName',
            width: 100,
            scopedSlots: {
              customRender: 'projectShortName',
            },
            fixed:'left',
          },
          {
            title: this.$t('deptMonthProjectSynthesis.projectAbbreviation'),
            dataIndex: 'projectAbbreviation',
            key: 'projectAbbreviation',
            width: 100,
            scopedSlots: {
              customRender: 'projectAbbreviation',
            },
            fixed:'left',
          },
          {
            title: this.$t('deptMonthProjectSynthesis.projectName'),
            dataIndex: 'projectName',
            key: 'projectName',
            width: 100,
            scopedSlots: {
              customRender: 'projectName',
            },
            fixed:'left',
          },
          {
            title: this.$t('deptMonthProjectSynthesis.allNode.title'),
            children: [{
                dataIndex: 'projectGroup',
                key: 'projectGroup',
                title: this.$t('deptMonthProjectSynthesis.allNode.projectGroup'),
                width: 180,
                scopedSlots: {
                  customRender: 'projectGroup',
                },
              },
              {
                key: 'importantGrade',
                width: 100,
                title: this.$t('deptMonthProjectSynthesis.allNode.importantGrade'),
                dataIndex: 'importantGrade',
                scopedSlots: {
                  customRender: 'importantGrade',
                },
              },
              {
                dataIndex: 'projectType',
                key: 'projectType',
                title: this.$t('deptMonthProjectSynthesis.allNode.projectType'),
                width: 100,
                scopedSlots: {
                  customRender: 'projectType',
                },
              },
              {
                key: 'projectSmallType',
                dataIndex: 'projectSmallType',
                width: 100,
                title: this.$t('deptMonthProjectSynthesis.allNode.projectSmallType'),
                scopedSlots: {
                  customRender: 'projectSmallType',
                },
              },
              {
                key: 'productCategory',
                title: this.$t('deptMonthProjectSynthesis.allNode.productCategory'),
                width: 100,
                dataIndex: 'productCategory',
                scopedSlots: {
                  customRender: 'productCategory',
                },
              },
              {
                dataIndex: 'market',
                width: 100,
                title: this.$t('deptMonthProjectSynthesis.allNode.market'),
                key: 'market',
                scopedSlots: {
                  customRender: 'market',
                },
              },
              {
                title: this.$t('deptMonthProjectSynthesis.allNode.internalOrderNumber'),
                width: 120,
                dataIndex: 'internalOrderNumber',
                key: 'internalOrderNumber',
                scopedSlots: {
                  customRender: 'internalOrderNumber',
                },
              },
              {
                key: 'priorityNum',
                dataIndex: 'priorityNum',
                width: 100,
                title: this.$t('deptMonthProjectSynthesis.allNode.priorityNum'),
                scopedSlots: {
                  customRender: 'priorityNum',
                },
              },
              {
                key: 'projectMananger',
                title: this.$t('deptMonthProjectSynthesis.allNode.projectMananger'),
                width: 100,
                dataIndex: 'projectMananger',
                scopedSlots: {
                  customRender: 'projectMananger',
                },
              },
              {
                key: 'state',
                dataIndex: 'state',
                title: this.$t('deptMonthProjectSynthesis.allNode.state'),
                width: 100,
                scopedSlots: {
                  customRender: 'state',
                },
              },
              {
                width: 100,
                key: 'healthStatus',
                title: this.$t('deptMonthProjectSynthesis.allNode.healthStatus'),
                dataIndex: 'healthStatus',
                scopedSlots: {
                  customRender: 'healthStatus',
                },
              },
              {
                width: 200,
                title: this.$t('deptMonthProjectSynthesis.allNode.currentKeyTaskName'),
                key: 'currentKeyTaskName',
                scopedSlots: {
                  customRender: 'currentKeyTaskName',
                },
                dataIndex: 'currentKeyTaskName',
              },
              {
                dataIndex: 'currentKeyTaskEndDate',
                title: this.$t('deptMonthProjectSynthesis.allNode.currentKeyTaskEndDate'),
                key: 'currentKeyTaskEndDate',
                scopedSlots: {
                  customRender: 'currentKeyTaskEndDate',
                },
                width: 240,
              },
              {
                title: this.$t('deptMonthProjectSynthesis.allNode.currentMonthlyKeyTaskName'),
                dataIndex: 'currentMonthlyKeyTaskName',
                scopedSlots: {
                  customRender: 'currentMonthlyKeyTaskName',
                },
                key: 'currentMonthlyKeyTaskName',
                width: 200,
              },
              {
                title: this.$t('deptMonthProjectSynthesis.allNode.currentMonthlyKeyTaskEndDate'),
                width: 300,
                scopedSlots: {
                  customRender: 'currentMonthlyKeyTaskEndDate',
                },
                dataIndex: 'currentMonthlyKeyTaskEndDate',
                key: 'currentMonthlyKeyTaskEndDate',
              },
              {
                title: this.$t('deptMonthProjectSynthesis.allNode.currentMonthlyKeyTaskTotalCount'),
                dataIndex: 'currentMonthlyKeyTaskTotalCount',
                key: 'currentMonthlyKeyTaskTotalCount',
                width: 200,
                scopedSlots: {
                  customRender: 'currentMonthlyKeyTaskTotalCount',
                },
              },
              {
                title: this.$t('deptMonthProjectSynthesis.allNode.currentMonthlyKeyTaskCompletedCount'),
                dataIndex: 'currentMonthlyKeyTaskCompletedCount',
                key: 'currentMonthlyKeyTaskCompletedCount',
                width: 240,
                scopedSlots: {
                  customRender: 'currentMonthlyKeyTaskCompletedCount',
                },
              },
              {
                title: this.$t('deptMonthProjectSynthesis.allNode.currentMonthlyKeyTaskCompletedRate'),
                dataIndex: 'currentMonthlyKeyTaskCompletedRate',
                key: 'currentMonthlyKeyTaskCompletedRate',
                width: 230,
                scopedSlots: {
                  customRender: 'currentMonthlyKeyTaskCompletedRate',
                },
              },
              {
                title: this.$t('deptMonthProjectSynthesis.allNode.currentMonthlyActivityCompletedRate'),
                dataIndex: 'currentMonthlyActivityCompletedRate',
                key: 'currentMonthlyActivityCompletedRate',
                width: 200,
                scopedSlots: {
                  customRender: 'currentMonthlyActivityCompletedRate',
                },
              },
              {
                title: this.$t('deptMonthProjectSynthesis.allNode.currentMonthlyDeliverableCompletedRate'),
                dataIndex: 'currentMonthlyDeliverableCompletedRate',
                key: 'currentMonthlyDeliverableCompletedRate',
                width: 200,
                scopedSlots: {
                  customRender: 'currentMonthlyDeliverableCompletedRate',
                },
              },
              {
                title: this.$t('deptMonthProjectSynthesis.allNode.targetWorkDay'),
                dataIndex: 'targetWorkDay',
                key: 'targetWorkDay',
                width: 200,
                scopedSlots: {
                  customRender: 'targetWorkDay',
                },
              },
              {
                title: this.$t('deptMonthProjectSynthesis.allNode.actualWorkDay'),
                dataIndex: 'actualWorkDay',
                key: 'actualWorkDay',
                width: 220,
                scopedSlots: {
                  customRender: 'actualWorkDay',
                },
              },
              {
                title: this.$t('deptMonthProjectSynthesis.allNode.projectCompleteRate'),
                dataIndex: 'projectCompleteRate',
                key: 'projectCompleteRate',
                width: 180,
                scopedSlots: {
                  customRender: 'projectCompleteRate',
                },
              },
              {
                title: this.$t('deptMonthProjectSynthesis.allNode.projectDeviationRate'),
                dataIndex: 'projectDeviationRate',
                key: 'projectDeviationRate',
                width: 180,
                scopedSlots: {
                  customRender: 'projectDeviationRate',
                },
              },
              {
                title: this.$t('deptMonthProjectSynthesis.allNode.projectDeliverableRate'),
                dataIndex: 'projectDeliverableRate',
                scopedSlots: {
                  customRender: 'projectDeliverableRate',
                },
                key: 'projectDeliverableRate',
                width: 180,
              },
              {
                key: 'changeTotalCount',
                width: 100,
                title: this.$t('deptMonthProjectSynthesis.allNode.changeTotalCount'),
                dataIndex: 'changeTotalCount',
                scopedSlots: {
                  customRender: 'changeTotalCount',
                },
              },
              {
                dataIndex: 'changeLastTime',
                title: this.$t('deptMonthProjectSynthesis.allNode.changeLastTime'),
                key: 'changeLastTime',
                scopedSlots: {
                  customRender: 'changeLastTime',
                },
                width: 120,
              },
              {
                title: this.$t('deptMonthProjectSynthesis.allNode.issueTotalCount'),
                key: 'issueTotalCount',
                width: 100,
                dataIndex: 'issueTotalCount',
                scopedSlots: {
                  customRender: 'issueTotalCount',
                },
              },
              {
                dataIndex: 'issueColsedCount',
                title: this.$t('deptMonthProjectSynthesis.allNode.issueColsedCount'),
                width: 120,
                scopedSlots: {
                  customRender: 'issueColsedCount',
                },
                key: 'issueColsedCount',
              },
              {
                title: this.$t('deptMonthProjectSynthesis.allNode.issueOnTimeRate'),
                dataIndex: 'issueOnTimeRate',
                scopedSlots: {
                  customRender: 'issueOnTimeRate',
                },
                key: 'issueOnTimeRate',
                width: 110,
              },
              {
                key: 'riskTotalCount',
                title: this.$t('deptMonthProjectSynthesis.allNode.riskTotalCount'),
                width: 100,
                scopedSlots: {
                  customRender: 'riskTotalCount',
                },
                dataIndex: 'riskTotalCount',
              },
              {
                title: this.$t('deptMonthProjectSynthesis.allNode.riskColsedCount'),
                dataIndex: 'riskColsedCount',
                scopedSlots: {
                  customRender: 'riskColsedCount',
                },
                key: 'riskColsedCount',
                width: 120,
              },
              {
                scopedSlots: {
                  customRender: 'riskOnTimeRate',
                },
                title: this.$t('deptMonthProjectSynthesis.allNode.riskOnTimeRate'),
                dataIndex: 'riskOnTimeRate',
                key: 'riskOnTimeRate',
                width: 110,
              },
              {
                key: 'targetCost',
                title: this.$t('deptMonthProjectSynthesis.allNode.targetCost'),
                width: 120,
                dataIndex: 'targetCost',
                scopedSlots: {
                  customRender: 'targetCost',
                },
              },
              {
                title: this.$t('deptMonthProjectSynthesis.allNode.actualCost'),
                dataIndex: 'actualCost',
                key: 'actualCost',
                width: 120,
                scopedSlots: {
                  customRender: 'actualCost',
                },
              },
            ],
          },
        ];
      },
      columnsData() {
        let arr = []
        this.columns.map(item => {
          this.$set(item, 'width', typeof item.width === 'number' && item.width ? item.width : 120) 
          if (item.children && item.children.length > 0) {
            item.children.map(im => {
              arr.push(im)
            })
          } else {
            arr.push(item)
          }
        })
        return arr
      },
      desc() {
        return this.$t('pageDesc')
      }
    },
    mounted() {
      this.tableData = [{"project":"OR:com.pisx.pmgt.project.PIProject:25767341023","lineNumber":"01","projectShortName":"02000726","projectName":"关键零部件测试项目","projectAbbreviation":"关键零部件测试项目","projectGroup":"重机事业部-力龙研究院-产品开发所 (SANY)","importantGrade":"L","projectType":null,"projectSmallType":"","productCategory":null,"market":"国内","internalOrderNumber":"","priorityNum":"5","projectMananger":"","state":"已立项","healthStatus":"灰","currentKeyTaskName":null,"currentKeyTaskEndDate":null,"currentMonthlyKeyTaskName":"无到期节点","currentMonthlyKeyTaskEndDate":"无到期节点","currentMonthlyKeyTaskTotalCount":"无到期节点","currentMonthlyKeyTaskCompletedCount":"无到期节点","currentMonthlyKeyTaskCompletedRate":"无到期节点","currentMonthlyActivityCompletedRate":"无到期节点","currentMonthlyDeliverableCompletedRate":"无需交付","targetWorkDay":".00","actualWorkDay":".00","projectCompleteRate":"0.0%","projectDeviationRate":"900.00%","projectDeliverableRate":"0.00%","changeTotalCount":"无","changeLastTime":"无","issueTotalCount":"无","issueColsedCount":"无","issueOnTimeRate":"100%","riskTotalCount":"无","riskColsedCount":"无","riskOnTimeRate":"100%","targetCost":"0.0","actualCost":"0.0"},{"project":"OR:com.pisx.pmgt.project.PIProject:26890556524","lineNumber":"02","projectShortName":"02002584","projectName":"项目测试1","projectAbbreviation":"测试","projectGroup":"重机事业部-力龙研究院-产品开发所 (SANY)","importantGrade":"B","projectType":null,"projectSmallType":"液压类","productCategory":null,"market":"国内","internalOrderNumber":"","priorityNum":"5","projectMananger":"崔英丽","state":"立项准备","healthStatus":"灰","currentKeyTaskName":null,"currentKeyTaskEndDate":null,"currentMonthlyKeyTaskName":"无到期节点","currentMonthlyKeyTaskEndDate":"无到期节点","currentMonthlyKeyTaskTotalCount":"无到期节点","currentMonthlyKeyTaskCompletedCount":"无到期节点","currentMonthlyKeyTaskCompletedRate":"无到期节点","currentMonthlyActivityCompletedRate":"0.00%","currentMonthlyDeliverableCompletedRate":"0.00%","targetWorkDay":"0","actualWorkDay":"0","projectCompleteRate":"0","projectDeviationRate":"0","projectDeliverableRate":"0.00%","changeTotalCount":"无","changeLastTime":"无","issueTotalCount":"无","issueColsedCount":"无","issueOnTimeRate":"100%","riskTotalCount":"无","riskColsedCount":"无","riskOnTimeRate":"100%","targetCost":"0","actualCost":"0"},{"project":"OR:com.pisx.pmgt.project.PIProject:26879522086","lineNumber":"03","projectShortName":"02002025","projectName":"力龙+关键岗考试","projectAbbreviation":"力龙+关键岗考试","projectGroup":"重机事业部-力龙研究院 (SANY)","importantGrade":"C","projectType":null,"projectSmallType":"液压类","productCategory":null,"market":"","internalOrderNumber":"","priorityNum":"5","projectMananger":"","state":"立项中","healthStatus":"灰","currentKeyTaskName":null,"currentKeyTaskEndDate":null,"currentMonthlyKeyTaskName":"无到期节点","currentMonthlyKeyTaskEndDate":"无到期节点","currentMonthlyKeyTaskTotalCount":"无到期节点","currentMonthlyKeyTaskCompletedCount":"无到期节点","currentMonthlyKeyTaskCompletedRate":"无到期节点","currentMonthlyActivityCompletedRate":"0.00%","currentMonthlyDeliverableCompletedRate":"0.00%","targetWorkDay":"0","actualWorkDay":"0","projectCompleteRate":"0","projectDeviationRate":"667.74%","projectDeliverableRate":"0.00%","changeTotalCount":"无","changeLastTime":"无","issueTotalCount":"无","issueColsedCount":"无","issueOnTimeRate":"100%","riskTotalCount":"无","riskColsedCount":"无","riskOnTimeRate":"100%","targetCost":"0","actualCost":"0"}]
      this.listData = this.tableData
    },
    methods: {
      onSelectChange(selectedRowKeys) {
        this.selectedRowKeys = selectedRowKeys;
      },
    }
  }
</script>
<style lang="less" scoped>
.doneProjectTable {
  padding-bottom: 14px;
  /deep/ .ant-table-thead > tr > th {
    border-right: 1px solid #eee;
    padding: 4px 8px;
  }
  /deep/ .ant-table-row-cell-last{
    border-bottom: 1px solid #eee !important;
  }
  /deep/ .ant-table-tbody > tr > td{
    padding: 0;
    height: 38px;
    padding-left: 10px;
  }
  /deep/ .ant-table-wrapper .ant-table-content .ant-table-body .ant-table-fixed .ant-table-thead > tr > th, .doneProjectTable[data-v-7aa3e537] .ant-table-wrapper .ant-table-content .ant-table-body .ant-table-fixed .ant-table-tbody > tr > td{
    padding-left: 18px;
  }
  /deep/ .ant-table-wrapper {
    .ant-table-content {
      .ant-table-body {
        .ant-table-fixed {
          .ant-table-thead > tr > th, .ant-table-tbody > tr > td {
            // padding: 9px 16px;
            overflow-wrap: break-word;
          }
          .ant-table-tbody {
            tr {
              td:nth-child(3) {
                 padding-left: 0px;
                .explain {
                  cursor: pointer;
                }
              }
            }
          }
        }
      }
    }
  }
  .textArea {
    margin-top: 40px;
    .title {
      margin-bottom: 8px;
      span {
        color: red
      }
    }
  }
  .txt{
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
</style>